WordPress

推荐列表 站点导航

当前位置:首页 > 建站教程 > WordPress >

Vue实现附件上传的具体代码介绍

来源:网络整理  作者:  发布时间:2020-12-20 10:43
前言前端UI是用的是element-ui的上传功能本文主要记录下代码,方便下次复制粘贴前端部分HTMLlimit:限制文件个数1个...

if (!this.fileType.includes(lastSubstring(item.name, '.'))) {

}  

工具类 JS

console.log('移除附件...')

<el-upload

type: type || 'success',

fileSize: 10,

str = str + v + split

split = ','

*/

message: msg || 'success',

action:原上传文件的路径,由于使用了自定义上传文件请求,即http-request,因此这个字段随便写就好,不写不行好像

// 字符串重组

}  
// 字符串相关工具类

// 把文件放入 FormData 进行提交

'Content-Type': 'multipart/form-data; charset=utf-8'

if (arr === undefined || arr === null || !(arr instanceof Array) || arr.length === 0) {

if (!flag) {

}

JS

uploadFile(param).then(response => {

import { message } from '@/utils/message'

if (str === undefined || str === null || split === undefined || split === null) {

// 附件上传失败,打印下失败原因

:on-remove="handleRemove"

:http-request="uploadFile"

}

@PostMapping(value="/uploadFile")

export function lastSubstring(str, split) {

param.append('files', file.file)

var str = ''

},

后端接口

message('error', tip)

return flag

:limit="1"

fileList: [],

if (split === undefined || split === null) {

tip = ' 文件类型不可上传'

}

auto-upload: 禁止自动上传,true的话选了文件就自动上传

})

// 带删除键提示,duration 为 0 时,不会自动消失

// 附件检查

* 单文件上传

on-error:用于处理上传异常后的处理,本人这主要用来关闭弹窗和全屏等待

return strRebuild(str)

} else {

console.log('上传附件...')

})

strRebuild(str) {

import { strRebuild, lastSubstring } from '@/utils/strUtil'

limit:限制文件个数 1 个

* @return

data() {

},

export default {

import { Message } from 'element-ui'

// 提示封装 type 提示类型, msg 提示信息,duration 持续时间

return ''

duration: duration || 0,

var files = this.$refs.upload.uploadFiles

:on-error="onError"

// TODO

handleRemove(file, fileList) {

fileType: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'txt', 'jpg', 'png', 'jpeg'],

}

// 文件过大

tip = ' 文件超过' + this.fileSize + 'M'

action="https://jsonplaceholder.typicode.com/posts/"

// 文件类型不属于可上传的类型

:auto-upload="false"

} else {

<el-button slot="trigger" size="small" type="primary">选取文件</el-button>

}

return request({

}  

if (this.checkFile()) {

// 截取最后一个特定字符后面的字符串

/**

// 数组根据分隔符重组为字符串

},

return {

methods: {

clear() {

})

},

return str.substring(str.lastIndexOf(split) + 1)

on-remove:移除附件时的钩子函数,主要就 console 输出下

this.$refs.upload.clearFiles()

// 附件列表

}

strUtil.js

:file-list="fileList"

submitUpload() {

})

// 检查附件是否超过限制大小

})

flag = false

if (i === arr.length - 1) {

}

Vue实现附件上传的具体代码介绍 (https://www.wpmee.com/) javascript教程 第1张

ref="upload"

* @param files 接收文件要以数组接收

},

message('error', '附件上传失败')

}

// 允许的文件类型

}  

// 提交附件

// 附件上传

// 检查附件是否属于可上传类型

}

duration: duration || 5 * 1000

API

public void uploadFile(@RequestBody MultipartFile[] files) {

}

var flag = true

const param = new FormData()

// TODO 一些关闭弹框,上传成功提示等

},

</el-upload>  

// 移除附件

file-list:绑定附件

onError(err) {

console.log(err)

<!-- <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->

data: file

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

arr.forEach((v, i) => {

// 自定义文件上传方法

checkFile() {

class="upload-demo">

},

}

var tip = ''

message: msg || 'success',

message.js

Message({

headers: {

}  

// 提示封装 type 提示类型, msg 提示信息,duration 持续时间

str = str + v

http-request:自定义上传文件请求方法,默认方法会与 mock 产生 XmlRequest 重新生成导致找不到文件问题,我注释了 mock 还是那样,没具体研究

this.$refs.upload.submit()

// 运行上传文件大小,单位 M

export function message(type, msg, duration) {

// 清空附件

export function strRebuild(arr, split) {

console.log('取消上传')

method: 'post',

return ''

}

url: '/uploadFile',

export function messageShowClose(type, msg, duration) {

showClose: true

},

files.forEach(item => {

// 清空表单

<div slot="tip">支持上传 {{ strRebuild(fileType) }} 格式,且不超过 {{ fileSize }}M</div>

return str

if (item.size > this.fileSize * 1024 * 1024) {

}

Message({

flag = false

type: type || 'success',

})

uploadFile(file) {

export function uploadFile(file) {

相关热词:

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!

本文地址: https://v30.fanwenzhu.com/jz/wp/6061.shtml

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

Vue实现附件上传的具体代码介绍

2020-12-20 编辑:

if (!this.fileType.includes(lastSubstring(item.name, '.'))) {

}  

工具类 JS

console.log('移除附件...')

<el-upload

type: type || 'success',

fileSize: 10,

str = str + v + split

split = ','

*/

message: msg || 'success',

action:原上传文件的路径,由于使用了自定义上传文件请求,即http-request,因此这个字段随便写就好,不写不行好像

// 字符串重组

}  
// 字符串相关工具类

// 把文件放入 FormData 进行提交

'Content-Type': 'multipart/form-data; charset=utf-8'

if (arr === undefined || arr === null || !(arr instanceof Array) || arr.length === 0) {

if (!flag) {

}

JS

uploadFile(param).then(response => {

import { message } from '@/utils/message'

if (str === undefined || str === null || split === undefined || split === null) {

// 附件上传失败,打印下失败原因

:on-remove="handleRemove"

:http-request="uploadFile"

}

@PostMapping(value="/uploadFile")

export function lastSubstring(str, split) {

param.append('files', file.file)

var str = ''

},

后端接口

message('error', tip)

return flag

:limit="1"

fileList: [],

if (split === undefined || split === null) {

tip = ' 文件类型不可上传'

}

auto-upload: 禁止自动上传,true的话选了文件就自动上传

})

// 带删除键提示,duration 为 0 时,不会自动消失

// 附件检查

* 单文件上传

on-error:用于处理上传异常后的处理,本人这主要用来关闭弹窗和全屏等待

return strRebuild(str)

} else {

console.log('上传附件...')

})

strRebuild(str) {

import { strRebuild, lastSubstring } from '@/utils/strUtil'

limit:限制文件个数 1 个

* @return

data() {

},

export default {

import { Message } from 'element-ui'

// 提示封装 type 提示类型, msg 提示信息,duration 持续时间

return ''

duration: duration || 0,

var files = this.$refs.upload.uploadFiles

:on-error="onError"

// TODO

handleRemove(file, fileList) {

fileType: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'txt', 'jpg', 'png', 'jpeg'],

}

// 文件过大

tip = ' 文件超过' + this.fileSize + 'M'

action="https://jsonplaceholder.typicode.com/posts/"

// 文件类型不属于可上传的类型

:auto-upload="false"

} else {

<el-button slot="trigger" size="small" type="primary">选取文件</el-button>

}

return request({

}  

if (this.checkFile()) {

// 截取最后一个特定字符后面的字符串

/**

// 数组根据分隔符重组为字符串

},

return {

methods: {

clear() {

})

},

return str.substring(str.lastIndexOf(split) + 1)

on-remove:移除附件时的钩子函数,主要就 console 输出下

this.$refs.upload.clearFiles()

// 附件列表

}

strUtil.js

:file-list="fileList"

submitUpload() {

})

// 检查附件是否超过限制大小

})

flag = false

if (i === arr.length - 1) {

}

Vue实现附件上传的具体代码介绍 (https://www.wpmee.com/) javascript教程 第1张

ref="upload"

* @param files 接收文件要以数组接收

},

message('error', '附件上传失败')

}

// 允许的文件类型

}  

// 提交附件

// 附件上传

// 检查附件是否属于可上传类型

}

duration: duration || 5 * 1000

API

public void uploadFile(@RequestBody MultipartFile[] files) {

}

var flag = true

const param = new FormData()

// TODO 一些关闭弹框,上传成功提示等

},

</el-upload>  

// 移除附件

file-list:绑定附件

onError(err) {

console.log(err)

<!-- <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->

data: file

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

arr.forEach((v, i) => {

// 自定义文件上传方法

checkFile() {

class="upload-demo">

},

}

var tip = ''

message: msg || 'success',

message.js

Message({

headers: {

}  

// 提示封装 type 提示类型, msg 提示信息,duration 持续时间

str = str + v

http-request:自定义上传文件请求方法,默认方法会与 mock 产生 XmlRequest 重新生成导致找不到文件问题,我注释了 mock 还是那样,没具体研究

this.$refs.upload.submit()

// 运行上传文件大小,单位 M

export function message(type, msg, duration) {

// 清空附件

export function strRebuild(arr, split) {

console.log('取消上传')

method: 'post',

return ''

}

url: '/uploadFile',

export function messageShowClose(type, msg, duration) {

showClose: true

},

files.forEach(item => {

// 清空表单

<div slot="tip">支持上传 {{ strRebuild(fileType) }} 格式,且不超过 {{ fileSize }}M</div>

return str

if (item.size > this.fileSize * 1024 * 1024) {

}

Message({

flag = false

type: type || 'success',

})

uploadFile(file) {

export function uploadFile(file) {

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供学习参考!
本文地址为 https://v30.fanwenzhu.com/jz/wp/6061.shtml

相关文章

风云图片

推荐阅读

返回WordPress频道首页